<template>
    <div class="counter">
        <h3>当前的值是： {{num}}</h3>
        <p>我叫{{name}}, 我今年{{age}}岁了。</p>
        <h3>当前的值被加工后的结果： {{sum}}</h3>
        <select v-model.number="value">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
        </select>
        <button @click="inc"> + </button>
        <button @click="dec"> - </button>
        <button @click="oddInc"> odd + </button>
        <button @click="asyncInc"> async 1s + </button>
        <button @click="reset">重置为0</button>
    </div>
</template>

<script>
import {mapState, mapGetters} from 'vuex';

export default {
    name: 'Count',
    data() {
        return {
            value: 1
        }
    },
    methods: {
        inc() {
            // console.log(this);
            // this.$store.dispatch('inc', this.value);
            // 上面dispatch的action不涉及任何业务逻辑判断和异步请求，
            // 所以可以省略，然后直接commit操作数据。 下同。
            this.$store.commit('inc', this.value);
        },
        dec() {
            // this.$store.dispatch('dec', this.value);
            this.$store.commit('dec', this.value);
        },
        oddInc() {
            this.$store.dispatch('oddInc', this.value);
        },
        asyncInc() {
            this.$store.dispatch('asyncInc', this.value);
        },
        reset() {
            this.$store.dispatch('reset', this.value);
            this.value = 1;
        }
    },
    computed: {
        // 第一种写法
        // ...mapState({num: 'num', name: 'name', age: 'age'}),

        // 第二种写法
        ...mapState(['num', 'name', 'age']),

        ...mapGetters(['sum']),
    },
    mounted() {
        // let x = mapState({num: 'num', name: 'name', age: 'age'});
        // console.log(x);
    }
}
</script>

<style scoped>
button {
    margin-left: 5px;
}
</style>